간단한 위젯을 만들고 버튼을 눌렀을 때 메시지를 표시하는 예제입니다. 원문에서 누락된 HTML 템플릿을 아래 예제에 보완했습니다.

1. 기본 구조

class MyWidget extends api.BasicWidget {
    get position() { return 1; }
    get parentWidget() { return "left-pane"; }
    
    doRender() {
        this.$widget = $('<div id="my-widget"></div>');
        return this.$widget;
    }
}

module.exports = new MyWidget();

프런트엔드 JavaScript 코드 노트를 만들고 위 코드를 넣으세요. #widget 속성을 노트에 지정한 뒤 창을 새로고침합니다.

개발자 도구에서 document.querySelector("#my-widget")로 요소가 있는지 확인할 수 있습니다. 결과가 null이면 노트의 #widget 속성과 코드 오류를 확인하세요.

2. 버튼 추가

const template = `<div id="my-widget"><button>인사하기</button></div>`;

class MyWidget extends api.BasicWidget {
    get position() {return 1;}
    get parentWidget() {return "left-pane"}

    doRender() {
        this.$widget = $(template);
        return this.$widget;
    }
}

module.exports = new MyWidget();

다시 불러오면 왼쪽 영역에 버튼이 나타납니다.

3. 모양과 위치

Trilium에 포함된 Boxicons를 사용해 아이콘을 표시할 수 있습니다.

const template = `<div id="my-widget"><button title="인사하기" aria-label="인사하기"><i class="bx bxs-magic-wand"></i></button></div>`;

CSS로 왼쪽 아래에 배치합니다.

class MyWidget extends api.BasicWidget {
    get position() { return 1; }
    get parentWidget() { return "left-pane"; }
    
    doRender() {
        this.$widget = $(template);
        this.cssBlock(`#my-widget {
            position: absolute;
            bottom: 40px;
            left: 60px;
            z-index: 1;
        }`);
        return this.$widget;
    }
}

module.exports = new MyWidget();

4. 클릭 동작

스크립트 API의 api.showMessage를 사용합니다.

class MyWidget extends api.BasicWidget {
    get position() { return 1; }
    get parentWidget() { return "left-pane"; }
    
    doRender() {
        this.$widget = $(template);
        this.cssBlock(`#my-widget {
            position: absolute;
            bottom: 40px;
            left: 60px;
            z-index: 1;
        }`);
        this.$widget.find("button").on("click", () => api.showMessage("안녕하세요!"));
        return this.$widget;
    }
}

module.exports = new MyWidget();

새로고침한 뒤 버튼을 누르면 안녕하세요!라는 메시지가 나타납니다.